import React, { Suspense } from "react";
import { routes } from "./routes";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { RouteRawState } from "../types";
import BeforeEachRoute from "./beforeEachRoute";
import { useSelector } from "react-redux";
import { RootState } from "../store";
// 封装业务函数， 将路由表中的无效占位路由去除掉， 同时将所有存在键值element的路由存取入新数组
const generatorRoutes = (
  routes: RouteRawState[],
  role: string
): RouteRawState[] => {
  return (
    routes
      // 过滤权限
      .filter((v) => {
        // 管理员 拥有所有
        if (role === "admin") return true;
        // 路由没有要求 所有人可以访问
        if (!v.meta.role) return true;
        // 当前用户是否符合路由权限要求
        return v.meta.role.includes(role);
      })
      .reduce((p, n) => {
        // 调用数组方法reduce
        // p 代表初始值 []
        // n 代表数组每一项 其实就是每一个没有处理过的路由

        // 是否存在element
        return n.element
          ? // 存在  => 使我们要找的路由级对象 =>  直接拼接路由级对象即可
            p.concat(n)
          : // 不存在  => 但是存在children => 递归调用 generatorRoutes => 拼接递归结果
            p.concat(generatorRoutes(n.children as RouteRawState[], role));
      }, [] as RouteRawState[] /* 注意： 将空数组类型断言  */)
  );
};

const Index = () => {
  const role = useSelector((state: RootState) => state.user.role);
  const asyncRoutes = generatorRoutes(routes, role);
  return (
    <BrowserRouter>
      <Suspense>
        <Routes>
          {asyncRoutes.map((v, i) => {
            return (
              <Route
                path={v.path}
                element={<BeforeEachRoute route={v}></BeforeEachRoute>}
                key={i}
              ></Route>
            );
          })}
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
};

export default Index;
